<template>
    <div>
        <el-card shadow="hover" :body-style="{padding: '0px'}">
            <div class="card-box clearfix">
                <i class="box-title-icon fontColor" :class="toReadContent.icon"></i>
                <template>
                    <el-tabs v-model="activeName" @tab-click="handleToReadClick">
                        <el-tab-pane :label="toReadContent.toReadReceiveName" name="first">
                            <el-badge slot="label" :value="toReadReceiveNum" class="badge-todo-item">
                                <span>{{toReadContent.toReadReceiveName}}</span>
                            </el-badge>

                            <div class="tabs-content-box">
                                <el-table :data="toReadReceive" :show-header="false" style="width: 100%;font-size:14px;">
                                    <el-table-column width="40">
                                        <template slot-scope="scope">
                                            <div class="todo-tag" v-bind:class="'todo-tag-'+(scope.$index+1)">{{scope.$index+1}}</div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column>
                                        <template slot-scope="scope">
                                            <div class="todo-item">
                                                <a href="#" title="" @click="openMenuFunction12(scope.row.id,scope.row.title)">{{scope.row.title}}</a>
                                            </div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column width="120" prop="lDispatchDepart" show-overflow-tooltip>
                                        <!--<template slot-scope="scope">
                                            <div class="todo-name">{{scope.row.fromDept}}</div>
                                        </template>-->
                                    </el-table-column>
                                    <el-table-column width="102">
                                        <template slot-scope="scope">
                                            <div class="todo-date">{{scope.row.fromDate}}</div>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane :label="toReadContent.toDoPapersName" name="second">
                            <el-badge slot="label" :value="toDoPapersNum" class="badge-todo-item">
                                <span>{{toReadContent.toDoPapersName}}</span>
                            </el-badge>

                            <div class="tabs-content-box">
                                <el-table :data="toDoPapers" :show-header="false" style="width: 100%;font-size:14px;">
                                    <el-table-column width="40">
                                        <template slot-scope="scope">
                                            <div class="todo-tag" v-bind:class="'todo-tag-'+(scope.$index+1)">{{scope.$index+1}}</div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column show-overflow-tooltip>
                                        <template slot-scope="scope">
                                            <div class="todo-item">
                                                <a href="#" title="" @click="openMenuFunction22(scope.row.id, scope.row.title)">{{scope.row.title}}</a>
                                            </div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column width="120" prop="fromDept" show-overflow-tooltip>
                                        <!--<template slot-scope="scope">
                                            <div class="todo-name">{{scope.row.fromDept}}</div>
                                        </template>-->
                                    </el-table-column>
                                    <el-table-column width="102" show-overflow-tooltip>
                                        <template slot-scope="scope">
                                            <div class="todo-date">{{scope.row.fromDate}}</div>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane :label="toReadContent.toReadPapersName" name="third">
                            <!--<el-badge slot="label" :value="toReadPapersNum" class="badge-todo-item">
                                <span>{{toReadContent.toReadPapersName}}</span>
                            </el-badge>-->
                            <div class="tabs-content-box">
                                <el-table :data="toReadPapers" :show-header="false" style="width: 100%;font-size:14px;">
                                    <el-table-column width="40">
                                        <template slot-scope="scope">
                                            <div class="todo-tag" v-bind:class="'todo-tag-'+(scope.$index+1)">{{scope.$index+1}}</div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column show-overflow-tooltip>
                                        <template slot-scope="scope">
                                            <div class="todo-item">
                                                <a href="#" title="" @click="openMenuFunction32(scope.row.id, scope.row.title)">{{scope.row.title}}</a>
                                            </div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column width="120" prop="fromDept" show-overflow-tooltip>
                                        <!--<template slot-scope="scope">
                                            <div class="todo-name">{{scope.row.fromDept}}</div>
                                        </template>-->
                                    </el-table-column>
                                    <el-table-column width="102" show-overflow-tooltip>
                                        <template slot-scope="scope">
                                            <div class="todo-date">{{scope.row.fromDate}}</div>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </el-tab-pane>

                    </el-tabs>
                </template>
                <el-button class="btn-more" type="text">
                    <a href="#" title="" @click="handleToReadMore" class="fontColor">MORE</a>
                </el-button>
            </div>
        </el-card>
    </div>
</template>

<script>
import { toReadContent } from './data/Content.js';
import bus from '../../common/bus';
import { formatDate } from '~/assets/utils/date.js';
import appUtil from '~/assets/utils/appUtil.js';
import { createNamespacedHelpers } from 'vuex';
const { mapState:tagState,  } = createNamespacedHelpers('tagModule');
let tabsName = 'first';


function getCookie(name) {
    let offset, cookieValue, end;
    let search = name + '=';
    let cookie = decodeURIComponent(process.client?document.cookie:{});
    if(cookie.length > 0) {
        offset = cookie.indexOf(search);
        if(offset >= 0) {
            offset += search.length;
            end = cookie.indexOf(';', offset);
            if (end === -1){
                end = cookie.length;
            }
            cookieValue = cookie.substring(offset, end);
        }
    }
    return cookieValue;
}
let token = getCookie('token');
export default {
    name: 'ToReadList',
    data() {
        return {
            activeName: 'first',
            //toReadReceive: require("./data/ToReadReceiveData.json"),
            //toReadPapers: require("./data/ToReadPapersData.json"),
            //toDoPapers: require("./data/ToDoPapersData.json"),
            toReadReceive:[],
            toDoPapers:[],
            toReadPapers:[],
            toReadContent:toReadContent
        };
    },
    computed: {
        ...tagState({
            activeTag:state => state.activeTag,
        }),
        toReadReceiveNum(){
            return this.toReadReceive.length;
        },
        toReadPapersNum(){
            return this.toReadPapers.length;
        },
        toDoPapersNum(){
            return this.toDoPapers.length;
        }
    },
    mounted(){
        let that = this;
        setTimeout(function(){
            that.getToReadReceive();
            that.getToReadPapers();
            that.getToDoPapers();
        },300);
        
    },

    methods: {
        getToReadReceive(){
            let url = null;
            if(toReadContent.toReadReceiveUrl.indexOf('?')>0){
                url = toReadContent.toReadReceiveUrl+'&username='+appUtil.getSes('userCode');
            }else{
                url = toReadContent.toReadReceiveUrl+'?username='+appUtil.getSes('userCode');
            }
            this.$axios.get(url)
                .then(res => {
                    this.toReadReceive = res.data.map( item => {
                        item.fromDate = formatDate(item.fromDate, 'yyyy-MM-dd');
                        return item;
                    });
                });
        },
        getToReadPapers(){
            let url = null;
            if(toReadContent.toReadPapersUrl.indexOf('?')>0){
                url = toReadContent.toReadPapersUrl+'&username='+appUtil.getSes('userCode');
            }else{
                url = toReadContent.toReadPapersUrl+'?username='+appUtil.getSes('userCode');
            }
            
            this.$axios.get(url)
                .then(res => {
                    this.toReadPapers = res.data.map( item => {
                        item.fromDate = formatDate(item.fromDate, 'yyyy-MM-dd');
                        return item;
                    });
                });
        },
        getToDoPapers(){
            let url = null;
            if(toReadContent.toDoPapersUrl.indexOf('?')>0){
                url = toReadContent.toDoPapersUrl+'&username='+appUtil.getSes('userCode');
            }else{
                url = toReadContent.toDoPapersUrl+'?username='+appUtil.getSes('userCode');
            }
            this.$axios.get(url)
                .then(res => {
                    this.toDoPapers = res.data.map( item => {
                        item.fromDate = formatDate(item.fromDate, 'yyyy-MM-dd');
                        return item;
                    });
                });
        },
        openMenuFunction1(id,title){
            //console.log(id,title);
            let menu = {
                url:'http://198.16.192.36/api2/oa/private-doc/'+id+'/',
                name:title
            };
            bus.$emit('openMenu',menu);
        },
        openMenuFunction2(id,title){
            //console.log(id,title);
            let menu = {
                url:'http://198.16.192.36/api2/oa/private-dispatch-doc/'+id+'/?',
                name:title
            };
            bus.$emit('openMenu',menu);
        },
        openMenuFunction3(id,title){
            //console.log(id,title);
            let menu = {
                url:'http://198.16.192.36/api2/oa/dispatch-doc/'+id+'/',
                name:title
            };
            bus.$emit('openMenu',menu);
        },
        openMenuFunction12(id){
            //window.open(url, '_blank');
            window.open('http://198.16.192.12/gongwen/swActive.action?id=' + id + '&token=' + token, '_blank');
        },
        openMenuFunction22(id){
            //window.open(url, '_blank');
            window.open('http://198.16.192.12/gongwen/active.action?id=' + id + '&token=' + token, '_blank');
        },
        openMenuFunction32(id){
            //window.open(url, '_blank');
            window.open('http://198.16.192.12/gongwen/fwkReadonly.action?id=' + id + '&firstMenu=xzgl&token=' + token, '_blank');
        },
        //
        handleToReadClick(tab) {
            //console.log(tab, event);
            tabsName = tab.name;
        },
        handleToReadMore(){
            let menu={};
            //根据所在的标签的不同，more的链接不同
            if (tabsName === 'first') {
                menu = {
                    url:toReadContent.toReadReceiveMoreUrl,
                    name:toReadContent.toReadReceiveName,
                    isNew:true
                };
            } else if (tabsName === 'second') {
                menu = {
                    url:toReadContent.toDoPapersMoreUrl,
                    name:toReadContent.toReadPapersMoreUrl,
                    isNew:true
                };
            } else {
                menu = {
                    url:toReadContent.toReadPapersMoreUrl,
                    name:toReadContent.toReadPapersName,
                    isNew:true
                };
            }
            
            bus.$emit('openMenu',menu);
        }
    },
    watch: {
        //el-badge组件存在嵌套过深无法自动更新视图的问题，需要使用forceUpdate强制刷新
        toReadReceive:{
            handler() {
                this.$children[0].$children[0].$children[0].$forceUpdate();
            }
        },
        toReadPapers:{
            handler() {
                this.$children[0].$children[0].$children[0].$forceUpdate();
            }
        },
        toDoPapers: {
            handler() {
                this.$children[0].$children[0].$children[0].$forceUpdate();
            }
        },
        activeTag(){
            if(this.activeTag.url==='index'){
                this.getToReadReceive();
                this.getToReadPapers();
                this.getToDoPapers();
            }
        }
    }
};
</script>
